<template>
  <div>

    <div class="title">
      <h1> 学生选课详情</h1>
      <el-button type="primary" icon="el-icon-plus" class="addCurrm"  @click="getSelectableScore"></el-button>
    </div>

    <el-dialog title="添加课程" :visible.sync="dialogFormVisible2">
      <el-form :model="newCurrm">
        <el-form-item label="课程" :label-width="formLabelWidth">
          <el-select v-model="newCurrm.id">
            <el-option
                v-for="item in selectableCurrm"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成绩" :label-width="formLabelWidth">
          <el-input v-model="newCurrm.score" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addScore(newCurrm)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更改成绩" :visible.sync="dialogFormVisible">
      <el-form :model="scoreInfo">
        <el-form-item label="成绩" :label-width="formLabelWidth">
          <el-input v-model="scoreInfo.score" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateScore(rowInfo)">确 定</el-button>
      </div>
    </el-dialog>

    <!--  放表格-->
    <el-table :data="scoreForm"  border stripe>
      <el-table-column label="课程名称" prop="currmName" ></el-table-column>
      <el-table-column label="授课老师"prop="teacherName"></el-table-column>
      <el-table-column label="所得绩点"prop= "point"></el-table-column>
      <el-table-column label="考试成绩" prop="score"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="dialogFormVisible=true,update=true,rowInfo=scope.row.currmId" icon="el-icon-edit"></el-button>
          <el-button type="primary" @click="deleteScore(scope.row.currmId)" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<script>
import {baseUrl} from "@/api/config";

export default {
  data(){
    return {
      dialogFormVisible:false,
      dialogFormVisible2:false,
      scoreForm: [],
      selectableCurrm:[],
      scoreInfo: {
        score:''
      },
      formLabelWidth: '180px',
      update:false,
      rowInfo:'',
      newCurrm:{
        id:'',
        score:''
      }
    }
  },
  mounted() {
    this.getScore();
  },
  methods:{
    async getScore(){
      console.log(this.$route.query.id)
      this.scoreForm = await axios.get(`${baseUrl}/student/${this.$route.query.id}/currms`)
          .then(function (response){
            console.log(response.data)
            return response.data.data
          })
          .catch(function (error){
            console.log(error)
            return false
          })
      console.log(this.scoreForm)
      return this.scoreForm
    },
    async addScore(info){
      await this.axios.post(`${baseUrl}/student/${this.$route.query.id}/currm/${info.id}`,info).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible2 = false
      await this.getScore()
    },
    async getSelectableScore(){
      this.dialogFormVisible2=true
      this.selectableCurrm = await axios.get(`${baseUrl}//student/${this.$route.query.id}/selectableCurrms`)
          .then(function (response){
            console.log(response.data)
            return response.data.data
          })
          .catch(function (error){
            console.log(error)
            return false
          })
      return this.selectableCurrm
    },
    async updateScore(id){
      await this.axios.put(`${baseUrl}/student/${this.$route.query.id}/currm/${id}`,this.scoreInfo).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      this.dialogFormVisible = false
      await this.getScore()
    },
    async deleteScore(id){
      await this.axios.delete(`${baseUrl}/student/${this.$route.query.id}/currm/${id}`).then(
          res =>{
            console.log(res);
          },res =>{
            console.log(res.state);
          })
      await this.getScore()
    }
  }

}
</script>

<style lang ="less" scoped>
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>